import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreaters } from './store'
import { DetailWrapper, Header, Content } from "./style";

class Detail extends Component {
  render() {
    const { content, title } = this.props;
    return (
      <DetailWrapper>
        <Header>{title}</Header>
        <Content dangerouslySetInnerHTML={{__html:content}}></Content>
      </DetailWrapper>
    )
  }
  componentDidMount() {
    this.props.getArticleContent(this.props.match.params.id)
  }
}
const mapState = (state) => ({
  title: state.getIn(['detail','title']),
  content: state.getIn(['detail','content']),
});
const mapDispatch = (dispatch) => {
  return {
    getArticleContent(id) {
      dispatch(actionCreaters.getArticleContent(id))
    }
  }
}

export default connect(mapState, mapDispatch)(Detail);
